Amazon Pay決済フロー
処理概要
決済の流れ(通常の決済)
決済の流れを以下に記載します。
sequenceDiagram
お客様->>加盟店様: カート画面に進む
(購入処理開始) 加盟店様-->>お客様: お客様->>加盟店様: 1.カート画面から
決済手続きに進む 加盟店様-->>お客様: Amazonpayボタン表示 participant 当サービス お客様->>Amazon: 2.Amazonpayボタン押下 Amazon-->>お客様: Amazonログイン画面表示 Note right of Amazon: Amazonログイン済の場合は省略 お客様->>Amazon: 3.Amazonログイン Amazon-->>お客様: お客様->>加盟店様: 加盟店様-->>お客様: 4.支払い方法/アドレス帳
ウィジェット表示 お客様->>加盟店様: 5.支払い方法、住所を選択し
決済を行う 加盟店様->>当サービス: 6.取引登録 当サービス-->>加盟店様: 加盟店様->>当サービス: 7.決済実行 当サービス->>Amazon: 8.決済処理 Amazon-->>当サービス: Amazon-->>お客様: お客様宛てご利用通知メール送信 当サービス-->>加盟店様: 結果通知(8.決済処理) 当サービス-->>加盟店様: 9.結果返却 加盟店様-->>お客様: 画面表示
(購入処理開始) 加盟店様-->>お客様: お客様->>加盟店様: 1.カート画面から
決済手続きに進む 加盟店様-->>お客様: Amazonpayボタン表示 participant 当サービス お客様->>Amazon: 2.Amazonpayボタン押下 Amazon-->>お客様: Amazonログイン画面表示 Note right of Amazon: Amazonログイン済の場合は省略 お客様->>Amazon: 3.Amazonログイン Amazon-->>お客様: お客様->>加盟店様: 加盟店様-->>お客様: 4.支払い方法/アドレス帳
ウィジェット表示 お客様->>加盟店様: 5.支払い方法、住所を選択し
決済を行う 加盟店様->>当サービス: 6.取引登録 当サービス-->>加盟店様: 加盟店様->>当サービス: 7.決済実行 当サービス->>Amazon: 8.決済処理 Amazon-->>当サービス: Amazon-->>お客様: お客様宛てご利用通知メール送信 当サービス-->>加盟店様: 結果通知(8.決済処理) 当サービス-->>加盟店様: 9.結果返却 加盟店様-->>お客様: 画面表示
フローの説明
- お客様がお支払い手段にAmazon Payを選択します。
- お客様がAmazonログインボタンを押下します。
- お客様がAmazonサイトでログインします。
- 加盟店様はお支払い方法ウィジェット、アドレス帳ウィジェットを表示します。
- お客様はウィジェットから決済に使用するクレジットカード、住所を選択し決済を行います。
- 加盟店様は当サービスの取引登録(EntryTranAmazonpay)を行います。
- 加盟店様は当サービスの決済実行(ExecTranAmazonpay)を行います。
- 当サービスがAmazon Payに対して決済処理を行います。
- 当サービスが加盟店様に決済結果を返却します。
決済の流れ(随時決済)
初回決済時
Amazon Pay随時決済の初回決済時の流れを以下に記載します。
sequenceDiagram
お客様->>加盟店様: カート画面に進む
(購入処理開始) 加盟店様-->>お客様: お客様->>加盟店様: 1.カート画面から
決済手続きに進む 加盟店様-->>お客様: Amazonpayボタン表示 participant 当サービス お客様->>Amazon: 2.Amazonpayボタン押下 Amazon-->>お客様: Amazonログイン画面表示 Note right of Amazon: Amazonログイン済の場合は省略 お客様->>Amazon: 3.Amazonログイン Amazon-->>お客様: お客様->>加盟店様: 加盟店様-->>お客様: 4.支払い方法/アドレス帳ウィジェット表示/
お支払い方法設定同意ウィジェット表示 お客様->>加盟店様: 5.支払い方法、住所を選択、
同意にチェックし決済を行う 加盟店様->>当サービス: 6.取引登録 当サービス-->>加盟店様: 加盟店様->>当サービス: 7.決済実行 当サービス->>Amazon: 8.決済処理 Amazon-->>当サービス: Amazon-->>お客様: お客様宛てご利用通知メール送信 当サービス-->>加盟店様: 結果通知(8.決済処理) 当サービス-->>加盟店様: 9.結果返却 加盟店様-->>お客様: 画面表示
(購入処理開始) 加盟店様-->>お客様: お客様->>加盟店様: 1.カート画面から
決済手続きに進む 加盟店様-->>お客様: Amazonpayボタン表示 participant 当サービス お客様->>Amazon: 2.Amazonpayボタン押下 Amazon-->>お客様: Amazonログイン画面表示 Note right of Amazon: Amazonログイン済の場合は省略 お客様->>Amazon: 3.Amazonログイン Amazon-->>お客様: お客様->>加盟店様: 加盟店様-->>お客様: 4.支払い方法/アドレス帳ウィジェット表示/
お支払い方法設定同意ウィジェット表示 お客様->>加盟店様: 5.支払い方法、住所を選択、
同意にチェックし決済を行う 加盟店様->>当サービス: 6.取引登録 当サービス-->>加盟店様: 加盟店様->>当サービス: 7.決済実行 当サービス->>Amazon: 8.決済処理 Amazon-->>当サービス: Amazon-->>お客様: お客様宛てご利用通知メール送信 当サービス-->>加盟店様: 結果通知(8.決済処理) 当サービス-->>加盟店様: 9.結果返却 加盟店様-->>お客様: 画面表示
フローの説明
- お客様がお支払い手段にAmazon Payを選択します。
- お客様がAmazonログインボタンを押下します。
- お客様がAmazonサイトでログインします。
- 加盟店様はお支払い方法ウィジェット、アドレス帳ウィジェット、お支払い方法設定同意ウィジェットを表示します。
- お客様はウィジェットから決済に使用するクレジットカード、住所を選択し、
同意のチェックを付け、決済を行います。 - 加盟店様は当サービスの取引登録(EntryTranAmazonpay)を行います。
- 加盟店様は当サービスの決済実行(ExecTranAmazonpay)を行います。
- 当サービスがAmazon Payに対して決済処理を行います。
- 当サービスが加盟店様に決済結果を返却します。
2回目以降の決済時
Amazon Pay随時決済の2回目以降の決済の流れを以下に記載します。
sequenceDiagram
participant お客様
加盟店様->>当サービス: 1.取引登録
当サービス-->>加盟店様:
加盟店様->>当サービス: 2.決済実行
当サービス->>Amazon: 3.決済処理
Amazon-->>当サービス:
当サービス-->>加盟店様: 結果通知(2.決済実行)
当サービス-->>加盟店様: 4.結果返却
フローの説明
- 加盟店様は当サービスの取引登録(EntryTranAmazonpay)を行います。
- 加盟店様は初回決済時に発行されたAmazonビリングアグリーメントIDを指定し、
当サービスの決済実行(ExecTranAmazonpay)を行います。 - 当サービスがAmazon Payに対して決済処理を行います。
- 当サービスが加盟店様に決済結果を返却します。
補足事項
・ログインボタンの表示について
加盟店様は、各種ウィジェットを実装していただく必要がございます。
実装にはAmazonが提供するJavaScriptを利用します。
最新の内容についてはAmazon Payが提供するインテグレーションガイドをご参照ください。
以下はボタンウィジェットを表示させるためのサンプルになります。
サンプルコード
<head>
<script type='text/javascript'>
window.onAmazonLoginReady = function() {
amazon.Login.setClientId('AmazonクライアントID(※1)');
};
window.onAmazonPaymentsReady = function() {
showButton();
};
</script>
<script async="async" src='https://static-fe.payments-amazon.com/OffAmazonPayments/jp/sandbox/lpa/js/Widgets.js(※2)'>
</script>
</head>
<body>
...
<div id="AmazonPayButton">
</div>
...
<script type="text/javascript">
function showButton(){
var authRequest;
OffAmazonPayments.Button("AmazonPayButton", "Amazon出品者ID(※3)", {
type: "PwA(※4)",
color: "Gold(※5)",
size: "large(※6)",
authorization: function() {
loginOptions = {scope: "payments:widget payments:shipping_address(※7)", popup: false(※8), state:"任意のパラメータ(※9)"};
authRequest = amazon.Login.authorize (loginOptions,"ログイン後URL(※10)");
},
onError: function(error) {
// error handling
if(error.getErrorCode() == 'ITP') {
// take no action -- allow interaction with widgets -- remove spinner/overlay if any
return;
}
}
});
};
</script>
...
</body>
htmlには下記項目をセットします。
項目名 | 設定値 |
---|---|
(※1)AmazonクライアントID | AmazonクライアントIDをセットします。 |
(※2)Amazon JavaScript URL | ログインウィジェットを利用するために必要なJavaScriptのURLになります。 上記サンプルはSandBoxモードのURLになりますのでご注意ください。 詳細はAmazon Payが提供するインテグレーションガイドを参照してください。 |
(※3)Amazon出品者ID | Amazon出品者IDをセットします。 |
(※4)ボタンウィジェットタイプ | ボタンウィジェットのタイプを入力します。 詳細はAmazon Payが提供するインテグレーションガイドを参照してください。 |
(※5)ボタンウィジェットカラー | ボタンウィジェットのカラーを入力します。 詳細はAmazon Payが提供するインテグレーションガイドを参照してください。 |
(※6)ボタンウィジェットサイズ | ボタンウィジェットのサイズを入力します。 詳細はAmazon Payが提供するインテグレーションガイドを参照してください。 |
(※7)スコープ | コンテンツと個人情報の共有するための同意画面のタイプに影響します。 詳細はAmazon Payが提供するインテグレーションガイドを参照してください。 |
(※8)ログイン画面表示方法 | Amazonログイン画面をポップアップで表示するか否かを入力します。 詳細はAmazon Payが提供するインテグレーションガイドを参照してください。 |
(※9)任意のパラメータ | ログイン後URLにパラメータを渡したい場合に指定します。 |
(※10)ログイン後URL | ログイン後にリダイレクトする加盟店様のURLをセットします。 |
項目名 | 説明 |
---|---|
JavaScriptの種類 | 加盟店様サイトのドメインを追加してください。 例)https://example.com/ |
リダイレクトURL | Amazonログイン後に遷移する加盟店様サイトのURLを追加してください。 例)https://example.com/payment.html |